<template>
  <div class="pox">
        <div class="div1">
            <img class="img1" src="/static/imgs_s02/s02_noodle.png" alt="">
            <img class="img2" src="/static/imgs_s02/s02_noodle02.PNG" alt="">
            <p class="p1">汇方圆·四川担担面(旗舰店)50份价值 56元双人餐免费抢</p>
            <div class="box">
                <div class="box1">
                    <span class="span1">0</span>
                    <span class="span2">￥56.00</span>
                </div>
                <div class="box2">
                    <span class="span3">100中奖名额</span>
                    <span class="span4">9756已报名</span>
                </div>
            </div>
        </div>
        <!-- ///////////// -->
        <div class="div2">
            <div class="left">
                <h1>适用商户</h1>
                <div class="left-1">
                    <img src="/static/imgs_s02/s02_store.png" alt="">
                    <span class="hfy">汇方圆·郑州旗舰店</span>
                </div>
                <div class="left-2">
                    <img src="/static/imgs_s02/s02_seat.png" alt="">
                    <p>河南省郑州市金水区中州大道农业路 苏荷中心1926</p>
                </div>

            </div>
            <div class="right">
                <div class="right-1">
                    <img class="right-a" src="/static/imgs_s02/s02_nav.png" alt="">
                    <span>导航</span>
                </div>
                <div class="right-2">
                    <img class="right-b" src="/static/imgs_s02/s02_phone.png" alt="">
                    <span>电话</span>
                </div>

            </div>
        </div>
        <div class="div3">
            <div class="div3-top">
                <span class="act-cont">活动内容</span>
                <span class="hdgz">活动规则</span>
                <span class="gdxx">更多信息</span>
                <div class="xhx"></div>
            </div>
            <h1>活动内容</h1>
            <div class="cont-details">
                <p>双人餐:</p>
                <p>招牌担担面 两份 32元</p>
                <p>老成都冰粉 16元</p>
                <p>鸡爪 两个 8元</p>
            </div>
        </div>
        <div class="div4">
            <h1>活动规则</h1>
            <div class="guize-1">
                <p class="tysj">体验时间</p>
                <p class="tysj-1">2019年11月16日 00:00 - 2019年12月15日 23:30 不需要预约</p>
            </div>
        </div>
        <div class="div5">
            <h1>活动流程</h1>
            <img src="/static/imgs_s02/s02_act.png" alt="">
            <p>提示：中奖结果将在<span>报名截止后的2~3天内</span>公布</p>
        </div>
        <div class="div6">
            <h1>更多信息</h1>
            <div class="hd">
                <span>这里是更多信息这里是更多信息这里是更多信息这里是更多信息 这里是更多信息这里是更多信息这里是更多信息这里是更多信息 这里是更多信息这里是更多信息这里是更多信息这里是更多信息
                    这里是更多信息这里是更多信息这里是更多信息这里是更多信息 这里是更多信息这里是更多信息这里是更多信息这里是更多信息 这里是更多信息这里是更多信息</span>
            </div>
        </div>

        <div class="div7">
            <button><span>已结束，看看其他活动</span></button>
        </div>


    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        * {
            padding: 0;
            margin: 0;
        }

        .pox {
            width: 100%;
        }

        .div1 {
            border-bottom: 10px solid #F0F1F2;
        }

        .div1 .img1 {
            width: 301px;
            height: 169px;
            margin-top: 11px;
            margin-left: 19px;

        }

        .img2 {
            width: 30px;
            height: 169px;
            margin-top: 11px;
            margin-left: 21px;

        }

        .p1 {
            width: 329px;
            height: 43px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            margin-left: 17px;
            margin-top: 25px;
        }

        .box {
            display: flex;
            flex-direction: row;
        }

        .box1 {
            display: flex;
            flex-direction: column;
            margin-top: 20px;

        }

        .box2 {
            display: flex;
            flex-direction: column;
            margin-top: 25px;

        }

        .span1 {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(246, 83, 88, 1);
            margin-left: 14px;
        }

        .span2 {
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(163, 165, 168, 1);
            margin-left: 12px;
            margin-top: 11px;
            margin-bottom: 14px;
        }

        .span3 {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            margin-left: 229px;
        }

        .span4 {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
            margin-left: 236px;
            margin-top: 10px;
            margin-bottom: 13px;
        }

        /* ////////////////// */
        .div2 {
            display: flex;
            flex-direction: row;
            border-bottom: 10px solid #F0F1F2;

        }

        .div2 img {
            width: 16px;
            height: 16px;
        }

        h1 {
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            margin-left: 17px;
            margin-top: 18px;

        }

        .left-1 {
            display: flex;
            flex-direction: row;
            margin-left: 15px;
            margin-top: 19px;
            margin-top: 17px;

        }

        .left-1 .hfy {
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 800;
            color: rgba(17, 17, 17, 1);
            margin-left: 4px;
        }

        .left-2 {
            margin-left: 16px;
            display: flex;
            flex-direction: row;
            margin-top: 14px;
            margin-bottom: 14px;

        }

        .left-2 img {
            margin-top: 7px;
        }

        .left-2 p {
            width: 202px;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-left: 4px;
        }

        .right {
            display: flex;
            flex-direction: row;
            margin-left: 40px;
            margin-top: 74px;
        }

        .right-1 {
            display: flex;
            flex-direction: column;
        }

        .right-2 {
            margin-left: 36px;
            display: flex;
            flex-direction: column;
        }

        .right span {
            margin-top: 7px;
            font-size: 12px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);

        }

        .div3-top {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(17, 17, 17, 1);
            margin-top: 16px;
        }

        .act-cont {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            margin-left: 50px;
        }

        .hdgz {
            margin-left: 50px;
        }

        .gdxx {
            margin-left: 57px;
        }

        .xhx {
            width: 56px;
            height: 3px;
            background: rgba(50, 177, 108, 1);
            margin-left: 52px;
            margin-top: 12px;
        }

        .div3,
        .div4,
        .div5
        {
            border-bottom: 10px solid #F0F1F2;
        }
        .div6{
          border-bottom: 10px solid #F0F1F2;
        }
        .cont-details {
            width: 118px;
            height: 62px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-left: 17px;
            margin-top: 22px;
            margin-bottom: 21px;
        }

        .guize-1 .tysj {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(17, 17, 17, 1);
            margin-left: 20px;
            margin-top: 18px;
        }

        .guize-1 .tysj-1 {
            width: 254px;
            height: 28px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-left: 22px;
            margin-top: 6px;
            margin-bottom: 16px;
        }

        .div5 img {
            width: 233px;
            height: 40px;
            margin-left: 70px;
            margin-top: 16px;

        }

        .div5 p {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #777777;
            margin-left: 19px;
            margin-top: 10px;
            margin-bottom: 11px;
        }

        .div5 span {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EC7043;
        }

        .hd {
            width: 337px;
            height: 140px;
            margin-left: 22px;
            margin-top: 13px;
        }

        .div6 span {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            

        }

        .div7 button {
            width: 352px;
            height: 39px;
            background: rgba(50, 177, 108, 1);
            border-radius: 20px;
            margin-top: 5px;
            margin-bottom: 4px;
            margin-left:11px;
        }

        .div7 span {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(253, 249, 248, 1);
        }
</style>
